<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ortum</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" th:href="@{../../css/index.css}">
    <link rel="stylesheet" th:href="@{../../css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{../../css/custom.css}">
    <link rel="stylesheet" th:href="@{../../css/iconfont/iconfont.css}">
    <!-- 滚动条样式 -->
    <link rel="stylesheet" th:href="@{../../lib/mCustonScrollbar/jquery.mCustomScrollbar.css}">
    <!-- 引入bootstrap css-->
    <link rel="stylesheet" th:href="@{https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css}" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    
    <script th:src="@{../../lib/jquery.min.js}"></script>
    <script th:src="@{../../lib/axios.min.js}"></script>
    <!-- 滚动条js -->
    <script th:src="@{../../lib/mCustonScrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>

    <!-- 引入bootstrap js -->
    <!--<script src="https://cdn.jsdelivr.net/npm/popper.js"></script>-->
    <script th:src="@{https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js}" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script th:src="@{https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js}" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script th:src="@{../../lib/ortumReq.js}"></script>

    <style>
        #ortum_form_Modal_body input::-webkit-input-placeholder,#ortum_form_Modal_body textarea::-webkit-input-placeholder {
            color: #77777773;
            font-size: 14px;
        }
        #ortum_form_Modal_body input,#ortum_form_Modal_body select,#ortum_form_Modal_body textarea{
            font-size: 14px;
            padding-left: 10px;
        }
        #ortum_form_Modal_body input:disabled,#ortum_form_Modal_body select:disabled{
            color: black;
        }

        /* 表头样式 */
        #ortum_form_Modal_body #ortum_field_preview>.ortum_bootstrap_h:nth-child(1) .ortum_bootstrap_hDom {
            background: #224F85 !important;
            color: #fff !important;
            height: 40px;
            line-height: 40px;
            padding: 0px;
            font-size: 16px;
        }

        .row .ortum_boot_col_default {
            border-right: 1px solid #fff;
        }

        /* label样式 */
        .ortum_bootstrap_label_cssClass {
            padding-left: 15px;
        }

        /* input */
        .ortum_bootstrap_grid .ortum_boot_col_default .ortum_bootstrap_input{
            width: 90%;
        }
        .ortum_bootstrap_grid .ortum_boot_col_default .form-control {
            border-radius: 0 !important;
            margin: 3.5px 0!important;
            height: 30px;
            line-height: 30px;
        }

        /* select样式 */
        .ortum_bootstrap_grid .ortum_boot_col_default .ortum_bootstrap_select {
            width: 90%;
        }

        .ortum_bootstrap_grid .ortum_boot_col_default .ortum_bootstrap_select .custom-select {
            border-radius: 0px !important;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            padding: 0px;
            margin:3.5px 0;
        }

        /* textarea */
        .ortum_bootstrap_grid .ortum_boot_col_default .ortum_bootstrap_textarea{
            width: 96%;
        }
        .ortum_bootstrap_grid .ortum_boot_col_default .ortum_bootstrap_textarea textarea{
            height: auto!important;
        }


        .ortum_bootstrap_td #ortum_form_Modal_body #ortum_field_preview>.ortum_item {
            margin-top: 2px !important;
            margin-bottom: 2px !important;
        }

        #ortum_form_Modal_body #ortum_field_preview>.ortum_item:nth-child(2n) {
            background: #fafafa !important;
        }

        #ortum_form_Modal_body #ortum_field_preview>.ortum_item:nth-child(2n+1) {
            background: rgba(245, 244, 244, 1) !important;
        }

        /* 表格样式 */
        .ortum_bootstrap_table .ortum_bootstrap_th {
            border-color: #fff;
        }

        .ortum_bootstrap_table .ortum_bootstrap_td {
            border-color: #fff;
        }

        .ortum_bootstrap_table .form-control {
            border-radius: 0px !important;
            height: 30px;
            width: 90%;
        }

        .ortum_bootstrap_table .ortum_bootstrap_thead tr th span {
            font-size: 16px;
            font-weight: 500;
            color: #000;
        }

        .ortum_bootstrap_table .ortum_bootstrap_thead tr th:nth-child(1) {
            min-width: 40px;
        }

        /* 提交按钮样式 */
        #ortum_preview_submit {
            background: #007bff;
            color: #fff;
            border-radius: 0px;
        }

        .col,
        .col-2 {
            padding-right: 0px;
            padding-left: 0px;
        }

        /*option意见*/
        .optionContainer{
            background-color:rgba(245,244,244,1);
        }
        .optionContainer > .row{
            margin: 0;
        }
        .optionTitle{border: 2px solid white;display: flex;align-items: center;}
        .optionContent{padding: 0 10px;border: 1px solid white;}
        .optionText{line-height: 30px;height: 90px}
        .optionSpan{display: block;white-space: pre-line;word-break: break-all;word-wrap: break-word;}
        .optionTimeAndName{display: flex;flex-direction: column;justify-content: center;align-items: flex-end;border-bottom: 2px solid white;}
        .optionContent .optionTimeAndName:last-of-type{
            border-bottom:none;
        }
    </style>

</head>
<body>
    <!--<div class="dropdown">
        <span class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">交换</span>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>-->

    <div id="ortum_form_Modal_body" class="container" style="margin: auto">

    </div>

    <div style="text-align: center" class="p-2">
        <button type="button" class="btn btn-outline-primary" id="ortum_preview_submit">提交</button>
    </div>

    <script>
        let getDomContextFormData = function(domId,settings={id:true,dataset:true,}){
            let formData = {}
            let form = document.getElementById(domId);  
            let elements = new Array();  
            let inputElements = form.getElementsByTagName('input');  
            let selectElements = form.getElementsByTagName('select');  
            let textareaElements = form.getElementsByTagName('textarea');
            let includeId = false;//表单有id，包含id的key
            let includeDataSet = false;//包含data属性
            if(Object.prototype.toString.call(settings).slice(8,-1) === "Object"){
                settings.id && (includeId = true);
                settings.dataset && (includeDataSet = true);
            }
            Array.prototype.forEach.call(inputElements,(item)=>{
                if(!item.name)return;//不存在name，不进行赋值
                if(includeDataSet){
                    for(let dataKey in item.dataset){
                        if(item.dataset.hasOwnProperty(dataKey)){
                            formData[item.name+"_"+dataKey] = item.dataset[dataKey];
                        };
                    }
                };
                let type = item.type.toLowerCase();
                switch (type){
                    case "radio":
                        includeId && item.checked && item.id && (formData[item.id] = item.value);
                        item.checked && item.name && (formData[item.name] = item.value);
                        break;
                    case "checkbox":
                        if(item.name && item.name.indexOf("switch") != -1){
                            includeId && item.checked && item.id && (formData[item.id] = item.value);
                            item.checked && (formData[item.name] = true);
                            !item.checked && (formData[item.name] = false);
                        }else{
                            item.name && item.checked && (formData[item.name] ? formData[item.name].push(item.value) : formData[item.name]=[item.value]);
                            includeId && item.id && item.checked && (formData[item.id] ? formData[item.id].push(item.value) : formData[item.id]=[item.value]);
                        };
                        break;
                    default:
                        includeId && item.id && (formData[item.id] = item.value);
                        item.name && (formData[item.name] = item.value);
                        break;
                }
            })
            Array.prototype.forEach.call(selectElements,(item)=>{
                includeId && item.id && (formData[item.id] = item.value);
                if(!item.name)return;//不存在name，不进行赋值
                if(includeDataSet){
                    for(let dataKey in item.dataset){
                        if(item.dataset.hasOwnProperty(dataKey)){
                            formData[item.name+"_"+dataKey] = item.dataset[dataKey];
                        }
                    }
                };
                formData[item.name] = item.value;
            })
            Array.prototype.forEach.call(textareaElements,(item)=>{
                includeId && item.id && (formData[item.id] = item.value);
                if(!item.name)return;//不存在name，不进行赋值
                if(includeDataSet){
                    for(let dataKey in item.dataset){
                        if(item.dataset.hasOwnProperty(dataKey)){
                            formData[item.name+"_"+dataKey] = item.dataset[dataKey];
                        }
                    }
                };
                formData[item.name] = item.value;
            })
            return formData;
        };

        $("#ortum_preview_submit").on('click',function(e){
            let formData = getDomContextFormData("ortum_form_Modal_body");
           // console.log(formData)
            alert(JSON.stringify(formData))
            return false;
        });
    </script>

    <script>

      let prevArrJSON = window.opener.require("feature").getFormContentJson("id",{id:"ortum_field",win:window.opener.document});
        //let prevArrJSON = getFormContentJson("id",{id:"ortum_field",win:window.opener.document});

        //这个地方调用接口获取返回的html即可
        console.log("========prevArrJSON======="+JSON.stringify(prevArrJSON));

        let prevDom = $('<div id="ortum_field_preview"></div>');

        let cssDomSet = [];
        let scriptDomSet = [];

        //待渲染权限的树
        let rendPowerArr = [];
        //从json渲染成dom
        function renderJson(prevArrJSON,parentDom,way="append") {
            for(let item of prevArrJSON){
                let domItem = item;
                let htmlDom;
                if(item.childrenType == "choose" && item.chooseFun){
                    (typeof item.chooseFun !=="function") && (item.chooseFun = Function('return ' + item.chooseFun)());
                    domItem = item.chooseFun(parentDom);
                };
                htmlDom = $(domItem.html);
                if(domItem.children && domItem.children.length){
                    renderJson(domItem.children,htmlDom,"replace");
                };
                //特殊处理Bootstrap_tableDom
                if(domItem.frame == "Bootstrap" && (domItem.componentKey == "tableDom" || domItem.componentKey == "newTableDom")){
                    $(htmlDom).prop("ortum-childrenArr-info",domItem.children);//tr中组件的信息
                    $(htmlDom).prop("ortum_tbodyTr_info",domItem.ortum_tbodyTr_info);//tr信息
                };
                switch (way) {
                    case "replace":
                        if(parentDom.find("ortum_children").length && /[\d]+$/.test(domItem.ortumChildren)){
                            parentDom.find("ortum_children[data-order="+ domItem.ortumChildren +"]").eq(0).replaceWith(htmlDom);
                        }else if(parentDom.find("ortum_children").length){
                            parentDom.find("ortum_children").eq(0).replaceWith(htmlDom);
                        };
                        break;
                    default:
                        parentDom.append(htmlDom);
                        break;
                };
                rendPowerArr.push({
                    dom:htmlDom,
                    name:domItem.name
                })
                domItem.css && cssDomSet.push(domItem.css);
                if(domItem.script){
                    domItem.script.babel ? scriptDomSet.push(domItem.script.babel) :  scriptDomSet.push(domItem.script)
                }
            }
        }
        renderJson(prevArrJSON,prevDom);

        $("#ortum_form_Modal_body").html(prevDom);
        cssDomSet.forEach((item,index)=>{
            $(document.head).append(item);
        })
        scriptDomSet.forEach((item,index)=>{
            $(document.body).append(item);
        });
        let purviewJson={
            "checkbox_21561456456456456":1,
            "radio_1252314543323":4,
            "table_1605100578804af1b_tfoot_1":3,
            "table_1605100578804af1b_tfoot_2":3,
            "table_1605100578804af1b_tfoot_4":1,
            "table_1605100578804af1b_1_1":1,
            "table_1605100578804af1b_2_1":0,
            "table_1605100578804af1b_3_1":1,
            "table_1605100578804af1b_4_1":3,
            "table_1605100578804af1b_5_1":4,
            "table_1605100578804af1b_6_1":1,
            "table_1605100578804af1b_7_1":2,
            "table_1605100578804af1b_8_1":1,
            "table_1605100578804af1b_9_1":3,
            "table_1605100578804af1b_10_1":3,
            "table_1605100578804af1b_11_1":2,
        };
        let priArr = {
            0:"hide",
            1:"read",
            2:"edit",
            3:"required",
            4:"readAndReq",
        };
        function setDomQ(outDom,formDom,name,priVal){
            //TODO 完善ortum_bindcomponentname关联组件的权限控制
            switch (priVal) {
                case "hide":
                    $(outDom).hide();
                    $("*[ortum_bindcomponentname="+ name +"]").parents(".ortum_item").eq(0).hide();
                    //特殊处理table
                    if(/^table/.test(name)){
                        let cellIndex = outDom.parents("td")[0].cellIndex;
                        $(outDom).parents("table").eq(0).find("tr td:nth-of-type("+ (cellIndex+1) +")").hide();
                        $(outDom).parents("table").eq(0).find("tr th:nth-of-type("+ (cellIndex+1) +")").hide();
                    };
                    break;
                case "read":
                    $(formDom).attr("disabled","disabled");
                    $("*[ortum_bindcomponentname="+ name +"]").parents(".ortum_item").eq(0).show();
                    break;
                case "edit":
                    $(formDom).removeAttr("disabled");
                    $("*[ortum_bindcomponentname="+ name +"]").parents(".ortum_item").eq(0).show();
                    break;
                case "required":
                    $(formDom).attr("ortum_verify","required");
                    $("*[ortum_bindcomponentname="+ name +"]").parents(".ortum_item").eq(0).show();
                    break;
                case "readAndReq":
                    $(formDom).attr("disabled","disabled");
                    $(formDom).attr("ortum_verify","required");
                    $("*[ortum_bindcomponentname="+ name +"]").parents(".ortum_item").eq(0).show();
                    break;
                default:
                    break;
            }
        }
        function setQ(dom,name,priJson) {
            let hasNameDom = $(dom).find("*[name="+ name +"]");
            if(priJson.hasOwnProperty(name)){
                $(dom).attr("ortum_authority",priJson[name]);//绑定权限值
                setDomQ(dom,hasNameDom,name,priArr[priJson[name]])
            };
        };
        //开始渲染权限
        rendPowerArr.forEach(function(item){
            setQ(item.dom,item.name,purviewJson)
        });
    </script>

</body>
</html>